<script lang='ts' setup>
import axios from "@/assets/工具/网络请求"
import { INDEX } from '@/assets/工具/枚举'
import { onMounted, ref } from "vue";
import { getPicture } from "@/assets/工具/工具类";
import type { HomeContent,ImagesUr,SmallStores } from "@/types";






import { useRouter } from "vue-router";

const path = 'http://33145gy5g.shenzhuo.vip:54481'

const router = useRouter()   /* 路由管理器对象（用于控制页面的跳转） */
/* 
    使用ref代理一个响应式对象：
    {} as HomeContent  ：创建一个HomeContent的对象，用于存放网络请求返回的数据。
*/
const mainContent = ref({} as HomeContent)
// mainContent.value.campusMien = new Array(3)
/* 
    INDEX.HOME : 从枚举中读取“网络资源”的地址
    then  ：网络请求成功时，执行then内部的回调函数。
    result ：网络请求成功时，得到的响应数据。
*/
/* select * from home where id = 1   查询逻辑类似于此句sql*/
// axios.doGet(INDEX.HOME + '/1').then(result => {
//     mainContent.value = result.data
// })
const call = (phoneNumber:string) => location.href = `tel:${phoneNumber}`  /* 呼叫指定电话号码 */
const viewCollegeIntroduce = () =>{  /* 跳转到学校简介页面 */
    router.push('/collegeIntroduce')
}
const PictureStyle =() =>{
    router.push('/PictureStyle')
}


const smallStores1 = ref<SmallStores[]>([]);

  // 在组件挂载完成后执行的生命周期钩子函数
  onMounted(async () => {
   
    try {
       
      // 发送 GET 请求获取店铺数据，使用自定义的 doGet 方法
      const response = await axios.doGet('/SmallStoresServlet');
        
      // 将获取到的数据赋值给 smallStores
      smallStores1.value = response.data;
      console.log('成功获取店铺数据:', smallStores1.value);
    
      
      
    } catch (error) {
      console.error('获取数据时出错:', error);
    }




    
  });
  


  const dataArray = ref({} as ImagesUr);

onMounted(async () => {
  try {
    const response = await axios.doGet('/ImageArrServlet');
    // 正确：使用 response.data 获取解析后的数据
    dataArray.value.image_path = response.data; 
  } catch (error) {
    console.error('请求出错:', error);
  }
  
}
);


const list1 = [...Array().keys()];



import {  watch } from 'vue';
import { createInjectionState, useToggle } from '@vueuse/core';

type BarrageInstance = {
  play: () => void;
  pause: () => void;
  // 根据实际情况添加更多属性和方法
};

const defaultList = [
  { id: 100, text: '2309班必胜！！！！！！' },
  { id: 101, text: '我本将心照明' },
  { id: 102, text: '奈何明月照沟渠！' },
  { id: 103, text: '但行好事，莫问前程！！' },
  { id: 104, text: '劝君跟进一杯酒，西出阳关无故人！！' },
  { id: 105, text: '长风破浪会有时' },
  { id: 106, text: '问汝平生功业，黄州惠州儋州。' },
  { id: 106, text: '冲冲冲！！！' }
  
];

const list = ref([...defaultList]);
const barrage = ref<BarrageInstance>();
let i = 0;
const add = () => {

  exter.value = !exter.value

  list.value.push({ id:107, text: `${text1[0]}` });
text1[0] = ''
  // list.value.push({ id: Math.random(), text: `${text1[i]}` });
//  i++
//  if (i ==text1.length){
//     i=0
//  }
};
const text1 = [
    // '我的演讲结束，谢谢大家！！！！！！加油！！' ,
    // '匡科继！！！！！加油！！',
    // '我的演讲结束',
    // '谢谢大家！！！！！！',
    // '加油！'
    ''
]


const [isPlay, toggle] = useToggle(false);

watch(isPlay, () => {
  if (isPlay.value) barrage.value?.play();
  else barrage.value?.pause();
});





import { showToast } from 'vant';

const showShare = ref(false);
const options = [
 
  [
    { name: '个人中心', icon: 'manager-o' },
    { name: '预约进校', icon: 'todo-list' },
    { name: '摄影定制', icon: 'balance-list' },
    { name: '订单详情', icon: 'bars' },
  ],
  [
    { name: '回到主页', icon: 'flag-o' },
    { name: '二维码', icon: 'qrcode' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
  ],
];

interface Option {
  name: string;

}

const onSelect = (option:Option) => {
  showShare.value = false;
  switch (option.name) {

    case '回到主页' :

      index();
    break;
    case '微博':
      shareToWeibo();
      break;
    case 'QQ':
      shareToQQ();
      break;
    case '个人中心':
      copyLink();
      break;
    case '预约进校':
      sharePoster();
      break;
    case '二维码':
      shareQRCode();
      break;
    case '摄影定制':
      shareWeappQRCode();
      break;
      case '订单详情':
      shareWeap();
      break;
    default:
      showToast('暂不支持该分享方式');
  }
};

const index = () =>{

  router.push('/')
}
const shareWeap = () =>{
router.push('/bookingVisitSchoolList')
}

// 分享到微博
const shareToWeibo = () => {
  const url = `https://service.weibo.com/share/share.php?url=${encodeURIComponent(
    `${path}`
  )}&title=${encodeURIComponent('我的大学城')}`;
  window.open(url, '_blank');
  showToast('已分享到微博');
};

// 分享到QQ
const shareToQQ = () => {
  const url = `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(
    `${path}`
  )}&title=${encodeURIComponent('我的大学城')}`;
  window.open(url, `${path}`);
  showToast('已分享到QQ');
};

// 复制链接
const copyLink = () => {
  router.push('/PersonalCenter')
};

// 分享海报
const sharePoster = () => {
  router.push('/bookingVisitSchool')
};

// 分享二维码
const shareQRCode = () => {
  // 生成二维码的逻辑
  showPopup()
  saveQrCode()
  showToast('点击保存二维码');
};

const shareWeappQRCode = () => {
  router.push('/PictureStyle')
};




import Qrcode from 'qrcode.vue';
import html2canvas from 'html2canvas';

const qrcodeRef = ref(null);
const qrCodeValue = ref(`${path}`);
const qrCodeOptions = ref({
  width: 200,
  height: 200,
  colorDark: '#000000',
  colorLight: '#ffffff',
});

const saveQrCode = async () => {
  if (qrcodeRef.value) {
    try {
      
      const canvas = await html2canvas(qrcodeRef.value);
      const link = document.createElement('a');
      link.download = 'qrcode.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
    } catch (error) {
      console.error('保存二维码失败:', error);
    }
  }
};

const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };


    interface Offset {
  x: number;
  y: number;
}
const onOffsetChange = (offset :Offset) => {
      // showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
      // if(`${offset.x.toFixed(0)} == 312 || ${offset.x.toFixed(0)} == 32`){

      // }

      showToast(`别拖了，疼死了`);

    };
    const onCancel = () => {
      showToast('小匡提醒您！已取消')
};
const exter = ref(false)
</script>



<template>
    <div style="position: relative;" class="">
        <div class="标题">
            {{'我的大学我的城' }}
        </div>



    <van-share-sheet
      v-model:show="showShare"
        title="立即分享和个人中心"
      :options="options"
      @select="onSelect"
       @cancel="onCancel"
    />



<van-floating-bubble
    axis="xy"
    magnetic="x"
    :gap="32"
    @click="showShare=true"
    @offset-change="onOffsetChange"
    class="showShare"
  >
    <!-- <img src="../assets/图片/通用/分享.png" alt="自定义图标" /> -->
    <img src="../assets/图片/780.jpg" alt="自定义图标" />

  </van-floating-bubble>


        
        <van-cell v-for="item in list1" :key="item" :title="item" />

<van-back-top />

        
        <van-notice-bar
  left-icon="volume-o"
  text="欢迎来到2309班，这是希望之班级！！希望大家能够每天快乐！每天精力充沛！！！"
/>



<van-popup  v-model:show="show" :style="{ padding: '64px' }"><Qrcode :value="qrCodeValue" :options="qrCodeOptions" /></van-popup>



        <van-swipe  class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item> <img
      v-if="dataArray && dataArray.image_path && dataArray.image_path.length > 3"
      :src="getPicture(dataArray.image_path[3])"
      id="封面主图"
      class="图片块级居中"
    />
    <van-loading v-else size="60x">加载中...</van-loading>
   </van-swipe-item>

  <van-swipe-item><img  id="封面主图"
    class="图片块级居中" :src="getPicture('主页/校园风采1.png') "></van-swipe-item>
  <van-swipe-item><img  id="封面主图"
    class="图片块级居中" :src="getPicture('主页/摄影定制封面2.png') "></van-swipe-item>
  <van-swipe-item><img  id="封面主图"
    class="图片块级居中" :src="getPicture('主页/校园风采3.png') "></van-swipe-item>



</van-swipe>

<div  style="position: absolute; width: 375px;  padding-left: 20px; box-sizing: border-box; margin: auto; top: 100px;">
    <van-barrage v-model="list" ref="barrage" :auto-play="false">
  <div class="video" style="width: 100%; height: 150px"></div>
</van-barrage>


<van-space style="margin-top: 10px ">
  <van-button @click="add" type="primary" size="mini" :disabled="!isPlay">
    弹幕
  </van-button>
  <van-button @click="toggle()" size="mini">
    {{ isPlay ? '暂停' : '开始' }}
  </van-button>
</van-space>




</div>



       
        <!-- <img :src="imageBaseUrl+dataArray.image_path[3]" id="封面主图" class="图片块级居中"> -->
        <div class="我的大学内容区域">
            <div  class="我的大学标题行">
                <img :src="getPicture('主页/我的大学logo.png')" id="我的大学logo" title="我的大学">
                <span @click="exter = !exter">我的大学</span>
                <input v-if="exter" v-model="text1[0]" type="text" name="" id="see">
            </div>
            <div class="我的大学选项列表">
                <div class="我的大学-选项" @click="viewCollegeIntroduce">
                    <div class="我的大学-选项-背景">
                        <img :src="getPicture('主页/学校简介.png')" class="我的大学-选项-图标">
                    </div>
                    学校简介
                </div>
                <div class="我的大学-选项">
                    <div class="我的大学-选项-背景">
                        <img :src="getPicture('主页/专业介绍.png')" class="我的大学-选项-图标">
                    </div>
                    专业介绍
                </div>
                <div class="我的大学-选项" @click="$router.push('/bookingVisitSchool')">
                    <div class="我的大学-选项-背景">
                        <img  :src="getPicture('主页/预约进校.png')" class="我的大学-选项-图标">
                    </div>
                    预约进校
                </div>
                <div class="我的大学-选项">
                    <div class="我的大学-选项-背景">
                        <img  :src="getPicture('主页/图书馆预约.png')" class="我的大学-选项-图标">
                    </div>
                    图书馆
                </div>
            </div>
            <div id="校园风采标题行">
                <div>校园风采</div>
                <div>
                    查看更多
                    <img  :src="getPicture('主页/查看更多.png')">
                </div>
            </div>
            <div id="校园风采预览区">
                <div id="风采大图-容器">
                    <img v-if="dataArray && dataArray.image_path && dataArray.image_path.length > 3" :src="getPicture(dataArray.image_path[0])" id="校园风采大图" />
                    <van-loading v-else color ='black' type="spinner" size="24px" />
                </div>

                <div id="校园风采右侧预览区">
                    <div class="右侧风采图裁剪-容器">
                        <img v-if="dataArray && dataArray.image_path && dataArray.image_path.length > 3" :src="getPicture(dataArray.image_path[1])" id="风采预览图2" />
                        
                        <van-loading  v-else color="#1989fa" />
                    </div>
                    <div class="右侧风采图裁剪-容器">
                        <img  v-if="dataArray && dataArray.image_path && dataArray.image_path.length > 3" :src="getPicture(dataArray.image_path[2])" id="风采预览图3" />
                        <van-loading v-else style="color: black;" type="spinner" size="24px" />
                    </div>
                </div>
            </div>
        </div>
        <div class="我的城内容区域">
            <div class="我的城标题行">
                <img  :src="getPicture('主页/我的城logo.png')" id="我的城logo">
                我的城
            </div>
            <div class="我的城-小标题">
                <span>
                    摄影定制
                </span>
                <span  @click="PictureStyle">
                    查看更多
                    <img  :src="getPicture('主页/查看更多.png')">
                </span>
            </div>
            <div id="摄影定制预览区">
                <div id="摄影定制预览图1-容器">
                    <img  :src="getPicture('主页/摄影定制封面1.png')" id="摄影定制预览图1">
                    <span>产品拍摄</span>
                </div>
                <div id="摄影定制右侧预览区">
                    <div id="摄影定制预览图2-容器">
                        <img  :src="getPicture('主页/摄影定制封面2.png ')" id="摄影定制预览图2">
                        <span>节日写真</span>
                    </div>
                    <div id="摄影定制预览图3-容器">
                        <img  :src="getPicture('主页/摄影定制封面3.png')" id="摄影定制预览图3">
                        <span>校园写真</span>
                    </div>
                </div>
            </div>
            <div class="我的城-小标题">
                <span>
                    网红小店
                </span>
                <span>
                    查看更多
                    <img  :src="getPicture('主页/查看更多.png')">
                </span>
            </div>
            <div id="网红小店区域">
                <div class="小店" v-for="store of smallStores1" :key="store.id">
                    <img :src="getPicture(store.cover)" class="小店封面图 图片块级居中">
                    <div class="小店名称">
                        {{ store.name }}
                    </div>
                    <div class="小店简介">
                        {{ store.description }}
                    </div>
                    <div class="打电话" @click="call(store.phone_number)">
                        <img  :src="getPicture('主页/电话.png')" >
                       
                        {{ store.phone_number }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<style scoped>
#see{
  width: 180px;
  background-color: rgb(255, 255, 255,0.6);
  border: none;
  border-bottom: 1px rgb(255, 230, 230) solid;
  margin-left: 26px;
}
.showShare img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: auto;
}

.showShare{
    position: fixed; 
    background-color: aliceblue;
     width: 30px; 
     line-height: 30px; 
     height: 30px;
     border-radius: 50%;
     z-index: 5; 
     right: 30px;
    top: calc(50% + 200px) ;
}

  .my-swipe .van-swipe-item {
    color: #ff0000;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
   
  }
.打电话{
    width: 142px;
    background: #c8c8c8;
    border-radius: 12.5px;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: rgb(51, 48, 48);
    margin:10px auto 15px;
    padding-left: 10px;
    box-sizing: border-box;
    height: 25px;
}
.打电话 img{
    width: 12px;
    margin-right: 7px;
}
.小店简介{
    font-size: 12px;
    padding-left: 0.5em;
    line-height: 18px;
    height: 50px;
    color: rgba(85, 85, 85, 1);
}
.小店名称{
    font-size: 16px;
    font-weight: bold;
    text-indent: 0.5em;
    margin: 5px 0;
}
.小店:nth-child(odd){
    position: relative;
    top: -20px;
}
.小店{
    width: 159.12px;
    background: rgb(255 239 219);
    border-radius: 7px;
    margin-bottom: 15px;
    border: 1px solid #fac39c;
    box-sizing: border-box;
}
.小店封面图{
    width: 159.12px;
    height: 150.22px;
}
#网红小店区域{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding:0 3px;
    margin-top: 50px;
    box-sizing: border-box;
}
#摄影定制预览图1-容器 span{
    position: absolute;
    bottom: 10px;
    left: 10px;
}
#摄影定制预览图2-容器 span{
    position: absolute;
    bottom: 1px;
    left: 10px;
}
#摄影定制预览图3-容器 span{
    position: absolute;
    bottom: 1px;
    left: 10px;
}
#摄影定制右侧预览区{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#摄影定制预览区{
    width: 330px;
    display: flex;
    margin:15px auto 5px;
    justify-content: space-between;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
}
#摄影定制预览图3 {
    width: 162px;
    height: 213px;
    position: absolute;
    top: -20px;
}

#摄影定制预览图3-容器 {
    width: 161px;
    height: 102px;
    overflow: hidden;
    position: relative;
    border-radius:5px;
}
#摄影定制预览图2 {
    width: 167px;
    height: 95px;
}

#摄影定制预览图2-容器 {
    width: 161px;
    height: 88px;
    display: flex;
    align-items: flex-end;
    border-radius:5px;
    overflow: hidden;
    position: relative;
}
#摄影定制预览图1 {
    width: 164px;
    height: 221px;
}

#摄影定制预览图1-容器 {
    width: 164px;
    height: 198px;
    display: flex;
    align-items: center;
    border-radius:5px;
    overflow: hidden;
    position: relative;
    top: 7px;
}

.我的城-小标题 img {
    width: 5px;
    height: 9px;
    margin-left: 7px
}

.我的城-小标题>span:nth-child(2) {
    font-size: 12px;
}

.我的城-小标题>span:nth-child(1) {
    font-size: 14px;
}

.我的城-小标题 {
    width: 343px;
    height: 28px;
    margin-top: 10px;
    background: linear-gradient(90deg, rgb(214, 171, 129) 0%, rgba(243, 252, 242, 0) 100%);
    ;
    color: rgba(120, 78, 35, 1);
    line-height: 28px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.我的城标题行 {
    font-size: 18px;
    font-weight: bold;
    color: rgba(120, 78, 35, 1);
    display: flex;
    align-items: center;
    height: 25px;
    margin-left: 9px;
    width: fit-content;
    /* 自适应宽度 */
}

#我的城logo {
    width: 18px;
    height: 17.82px;
    margin-right: 4px;
}

.我的城内容区域 {
    width: 343px;
    
    border-radius: 15.35px;
    margin: 10px auto;
}

.右侧风采图裁剪-容器 {
    width: 161.4px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 5px;
}

#风采预览图2 {
    width: 181px;
    height: 119px;
}

#风采预览图3 {
    width: 205px;
    height: 137px;
}

#校园风采右侧预览区 {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 128px;
    justify-content: space-between;
}

#风采大图-容器 {
    width: 161.4px;
    height: 128px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px
}

#校园风采大图 {
    width: 197px;
    height: 131px;
}

#校园风采预览区 {
    width: 330px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: auto;
}

#校园风采标题行 img {
    width: 6px;
    height: 10px;
    margin-left: 7px;
}

#校园风采标题行>div:nth-child(1) {
    color: rgba(120, 78, 35, 1);
    font-size: 14px;

}

#校园风采标题行>div:nth-child(2) {
    color: rgba(85, 85, 85, 1);
    font-size: 12px;
}

#校园风采标题行 {
    display: flex;
    line-height: 20px;
    width: 320px;
    margin: 0 auto 10px;
    justify-content: space-between;
    font-weight: bold
}

.我的大学-选项-图标 {
    width: 28px;
    height: 28px;
}

.我的大学-选项-背景 {
    width: 56px;
    height: 56px;
    background-image: url('@/assets/图片/主页/我的大学选项背景.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed #E0E0E0;
    box-sizing: border-box;
}

.我的大学选项列表 {
    display: flex;
    justify-content: space-evenly;
    margin: 20px auto 10px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
}

.我的大学标题行 {
    font-size: 18px;
    font-weight: bold;
    color: rgba(120, 78, 35, 1);
    display: flex;
    align-items: center;
    height: 25px;
    margin-left: 9px;
    width: fit-content;
    /* 自适应宽度 */
}

#我的大学logo {
    width: 18.41px;
    height: 14.84px;
    margin-right: 4px;
}


.我的大学内容区域 {
    width: 343px;
    background: #FFF;
    border-radius: 15.35px;
    margin: 10px auto;
}

#封面主图 {
    width: 375px;
    height: 210.7px;
}

.标题 {
    font-family: kj;
    height: 44px;
    font-size: 17px;
    line-height: 44px;
    text-align: center;
    font-weight: 900;
    letter-spacing: 10px;
    background: #FFF;
}
</style>
